﻿@{  
    Layout = "/Views/Shared/_Layout_Easyui.cshtml";
}
@section Scripts
{
    <script type="text/javascript" src="~/Content/Scripts/ajaxfileupload.js"></script>
    <script type="text/javascript">
        (function () {
            var editor = function () {

            };
            editor.prototype.init = function () {
                var scop = this;
                scop.setSetp(false);
                scop.setSetp(0, true);
                $('#icon_editor_from_size').combobox({
                    editable: false,
                    panelHeight: 100,
                    onSelect: function (record) {
                        scop.setBackround({ width: record.value, height: record.value });
                        scop.setSetp(1, true);
                    }
                });
                $('#icon_editor_from_button_upfile').click(function () {
                    $('#icon_editor_from').attr('enctype', 'multipart/form-data');
                    $.ajaxFileUpload({
                        url: '/File/Upload',
                        secureuri: false,
                        fileElementId: 'icon_editor_from_upfile',
                        dataType: 'json',
                        success: function (data) {
                            if (data.result) {
                                var img = new Image();
                                img.src = data.message;
                                img.onload = function () {
                                    $('#icon_editor_from').removeAttr('enctype');
                                    scop.setSliderMaxValue(img.height, img.width);
                                    $('#icon_editor_from_imgurl').val(data.message.replace(/[\/\/]/g, "/"));
                                    scop.setBackround('backgroundImage', 'url(' + data.message + ')');
                                    scop.setSetp(true);
                                };
                            } else {
                                $.messager.alert('错误提示', '上传图片失败,' + data.message, 'info');
                                scop.setSetp(false);
                                scop.setSetp([0, 1], true);
                            }
                        },
                        error: function (data, status, e) {
                            $.messager.alert('错误提示', '上传图片失败,' + e, 'info');
                            scop.setSetp(false);
                            scop.setSetp([0, 1], true);
                        }
                    });
                    $('#icon_editor_from').removeAttr('enctype');
                });

                $('#icon_editor_from_top').slider({
                    max: 100,
                    min: 0,
                    width: 250,
                    showTip:true,
                    onChange: function (newValue) {
                        scop.setBackround('backgroundPositionY', newValue * -1);
                    }
                });
                $('#icon_editor_from_left').slider({
                    max: 100,
                    min: 0,
                    width: 250,
                    showTip: true,
                    onChange: function (newValue) {
                        scop.setBackround('backgroundPositionX', newValue * -1);
                    }
                });
            };
            editor.prototype.setBackround = function () {
                try {
                    var tanger = $('#icon_editor_from_box_preview'), css = {
                        width: tanger.width(),
                        height: tanger.height(),
                        border: '1px solid rgb(230, 230, 250)',
                        backgroundColor: '#fff',
                        backgroundImage: tanger.css('backgroundImage'),
                        backgroundRepeat: 'no-repeat',
                        backgroundPositionX: tanger.css('backgroundPositionX'),
                        backgroundPositionY: tanger.css('backgroundPositionY')
                    }, args = arguments;
                    if (typeof args[0] === 'object') {
                        $.extend(css, args[0]);
                    }
                    if (typeof arguments[0] === 'string') {
                        css[arguments[0]] = arguments[1];
                    }
                    tanger.css(css);
                } catch (e) {
                    throw 'setBackround error';
                }
            };
            editor.prototype.setSliderMaxValue = function (top, left) {
                $('#icon_editor_from_top').slider({ max: top });
                $('#icon_editor_from_left').slider({ max: left });
            };
            editor.prototype.setSliderValue = function (top, left) {
                $('#icon_editor_from_top').slider('setValue', top);
                $('#icon_editor_from_left').slider('setValue', left);
            };
            editor.prototype.setSetp = function () {
                var args = arguments, status, nums;
                if (args.length > 1) {
                    if (typeof args[0] === 'number') {
                        status = args[1];
                        if (status) {
                            $('#icon_editor_from table tr:eq(' + args[0] + ')').show();
                        } else {
                            $('#icon_editor_from table tr:eq(' + args[0] + ')').hide();
                        }
                    } else if (typeof args[0] === 'object') {
                        nums = args[0];
                        status = args[1];
                        for (var i = 0; i < nums.length; i++) {
                            if (status) {
                                $('#icon_editor_from table tr:eq(' + nums[i] + ')').show();
                            } else {
                                $('#icon_editor_from table tr:eq(' + nums[i] + ')').show();
                            }
                        }
                    } else {
                        return;
                    }
                } else {
                    if (typeof args[0] === 'boolean') {
                        status = args[0];
                        if (status) {
                            $('#icon_editor_from table tr').show();
                        } else {
                            $('#icon_editor_from table tr').hide();
                        }
                    } else {
                        return;
                    }
                }
            };

            $(function () {
                new editor().init();
            });

        } ());
    
    </script>
}
<div style="width: 600px; height: 400px;">
    <form id="icon_editor_from" class="from" method="POST">
    <table>
        <tr>
            <th>
                图标大小
            </th>
            <td>
                <select id="icon_editor_from_size" name="IconSize">
                    <option value="">请选择..</option>
                    <option value="32">32X32</option>
                    <option value="18">18X18</option>
                </select>
            </td>
        </tr>
        <tr>
            <th width="100">
                图片上传
            </th>
            <td class="notb norb">
                <input id="icon_editor_from_upfile" name="bagFile" type="file" style="width: 180px;" />
                <a id="icon_editor_from_button_upfile" class="easyui-linkbutton" href="javascript:;"
                    data-options="iconCls:'icon-mini-add'">上传图片</a>
                <input id="icon_editor_from_imgurl" type="hidden" name="IconUrl" value="" />
            </td>
        </tr>
        <tr>
            <th>
                Top
            </th>
            <td>
                <input id="icon_editor_from_top" name="IconTop" />
            </td>
        </tr>
        <tr>
            <th>
                Left
            </th>
            <td class="norb">
                <input id="icon_editor_from_left" name="IconLeft" />
            </td>
        </tr>
        <tr>
            <th>
                预览
            </th>
            <td>
                <div id="icon_editor_from_box_preview">
                </div>
            </td>
        </tr>
        <tr>
            <td style="border-bottom: 0px;" align="center" colspan="2">
                <a href="javacript:;" class="easyui-linkbutton" id="icon_editor_from_button_clear"
                    data-options="iconCls:'icon-cancel'" style="width: 80px; margin-right: 20px;">取消</a>
                <a href="javacript:;" class="easyui-linkbutton" id="icon_editor_from_button_save"
                    data-options="iconCls:'icon-save'" style="width: 80px">保存</a>
            </td>
        </tr>
    </table>
    </form>
</div>
